<script setup lang="ts">
import { computed, ref } from 'vue';
import { PatientApi } from '@/api/patient';
import AuthBar from '@/components/authBar/index.vue';
import Login from '@/components/login/index.vue';
import { BooleanNumber } from '@/enums';
import { FACE_COMPARE_TYPE, LOGIN_STATUS, LOGIN_TYPE } from '@/enums/login.enums';
import { useLoginHelper } from '@/hooks/useLoginHelper';
import { buildAssetSource } from '@/utils';
import FaceRegister from './components/faceRegister.vue';

// #ifdef APP-PLUS
const facePlugin = uni.requireNativePlugin('XWC-Face');
// #endif

const loginStatus = ref<LOGIN_STATUS>(LOGIN_STATUS.INIT);

// 失败原因
const failReason = ref('');

// 状态描述文案
const recognizeStatusDesc = computed(() => {
  let statusText = {
    title: '',
    desc: ''
  };
  switch (loginStatus.value) {
    case LOGIN_STATUS.INIT:
      statusText = {
        title: '人脸识别',
        desc: '请将面部对准摄像头进行识别'
      };
      break;
    case LOGIN_STATUS.READING:
      statusText = {
        title: '人脸识别',
        desc: '正在扫描面部'
      };
      break;
    case LOGIN_STATUS.SUCCESS:
      statusText = {
        title: '人脸识别成功',
        desc: '请稍后...'
      };
      break;
    case LOGIN_STATUS.FAIL:
      statusText = {
        title: '人脸识别失败',
        desc: '人脸识别失败'
      };
      break;
  }
  return statusText;
});

const faceRegisterRef = ref<InstanceType<typeof FaceRegister>>();

const { onToLoginConfirm } = useLoginHelper();

function handleStartScan() {
  facePlugin.CompareFace(FACE_COMPARE_TYPE.SERVER, res => {
    console.log('>>>>res', res);
    if (res.success === BooleanNumber.TRUE) {
      loginStatus.value = LOGIN_STATUS.SUCCESS;
      // 通过人脸获取患者信息
      PatientApi.onFaceLogin({
        type: LOGIN_TYPE.FACE,
        image: res.image
      }).then(res => {
        onToLoginConfirm(res);
      }).catch(err => {
        // TODO 新增人脸注册
        console.log('>>>人脸登录失败', err);
        faceRegisterRef.value?.onOpen(res.image);

        // loginStatus.value = LOGIN_STATUS.FAIL;
        // failReason.value = err.msg || '识别失败，请重新识别';
      });
    }
    else {
      loginStatus.value = LOGIN_STATUS.FAIL;
    }
  });
}

const loginRef = ref<InstanceType<typeof Login>>();

function onOpenLogin() {
  loginRef.value?.onOpenLoginModal();
}
</script>

<template>
  <view class="face-login flex-col">
    <AuthBar back-home />
    <view class="flex-1 overflow-auto">
      <view class="face-login__cover m-auto mt-45">
        <image :src="buildAssetSource('login-face-icon.png')" class="h-120 w-114" />
      </view>
      <view class="face-login__title mt-34">
        {{ recognizeStatusDesc.title }}
      </view>
      <view class="face-login__desc mt-34">
        {{ recognizeStatusDesc.desc }}
      </view>

      <view class="mt-48 px-162">
        <view class="face-login__content">
          <!-- 初始化 -->
          <view v-if="loginStatus === LOGIN_STATUS.INIT" class="pb-30 pt-60">
            <view class="idcard-content__title text-center">
              人脸识别区
            </view>
            <view class="mb-30 flex-center">
              <image :src="buildAssetSource('login-faceRecong.png')" class="h-358 w-370" />
            </view>
          </view>

          <!-- 识别成功 -->
          <view v-if="loginStatus === LOGIN_STATUS.SUCCESS" class="pb-58 pt-74">
            <view class="complete-icon flex-center">
              <image :src="buildAssetSource('dui.png')" class="h-105 w-105" />
            </view>
            <view class="complete-info mt-46">
              人脸识别成功
            </view>
            <view class="progress-text mt-33">
              正在为您登录系统...
            </view>

            <view class="mt-70 flex-center">
              <image :src="buildAssetSource('loading.png')" class="h-130 w-130 animate-spin" />
            </view>
          </view>

          <!-- 识别失败 -->
          <view v-if="loginStatus === LOGIN_STATUS.FAIL" class="pb-93 pt-74">
            <view class="complete-icon flex-center">
              <image :src="buildAssetSource('login-close.png')" class="h-105 w-105" />
            </view>
            <view class="complete-info mt-36">
              人脸识别失败
            </view>
            <view class="progress-text mt-33">
              {{ failReason }}
            </view>
          </view>
        </view>
      </view>

      <view v-if="loginStatus === LOGIN_STATUS.INIT" class="mt-46 flex-center">
        <view class="action-btn w-708">
          <wd-button block @click="handleStartScan">
            开始人脸识别
          </wd-button>
        </view>
      </view>

      <view v-if="loginStatus === LOGIN_STATUS.FAIL" class="my-86 flex-center">
        <view class="action-btn w-371">
          <wd-button block @click="handleStartScan">
            重试
          </wd-button>
        </view>
        <view class="action-btn ml-30 w-371">
          <wd-button block @click="onOpenLogin">
            更换方式
          </wd-button>
        </view>
      </view>

      <view class="mt-50 px-50">
        <view class="login-tips">
          <view class="tips-title">
            <wd-icon name="help-circle" size="32px" /> 隐私保护
          </view>
          <view class="tips-content">
            <view>
              人脸识别数据仅用于身份验证，不会存储或用于其他用途。
            </view>
            <view>
              请确保在光线充足的环境下进行识别，面部无遮挡。
            </view>
          </view>
        </view>
      </view>

      <Login ref="loginRef" />
    </view>

    <FaceRegister ref="faceRegisterRef" @submit="onToLoginConfirm" />
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '用户登录',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.face-login {
  background-color: var(--bg-color);
  height: 100%;

  .face-login__cover {
    @apply flex-center;
    background: #e5efff;
    width: 202px;
    height: 202px;
    border-radius: 50%;
  }

  .face-login__title {
    color: var(--text-color);
    font-weight: bold;

    font-size: 60px;
    text-align: center;
  }

  .face-login__desc {
    font-size: 28px;
    color: var(--secondary-text-color);
    text-align: center;
  }

  .face-login__content {
    background: #fff;
    border-radius: 20px;

    .idcard-content__title {
      font-size: 36px;
      font-weight: 500;

      color: var(--text-color);
    }

    .idcard-content__desc {
      background: #e5efff;
      border-radius: 10px;
      color: var(--secondary-text-color);
      display: inline-block;
      padding: 24px 36px;
      font-size: 28px;
      margin: 45px auto;
    }

    .progress {
      --wot-progress-height: 30px;
      --wot-progress-bg: #c0dcff;
      --wot-progress-color: var(--primary);
    }

    .progress-text {
      font-size: 28px;
      color: var(--secondary-text-color);
      text-align: center;
    }

    .complete-icon {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: #e5efff;
      margin: 0 auto;
    }

    .complete-info {
      text-align: center;
      font-size: 48px;
      font-weight: bold;
      color: var(--text-color);
    }
  }

  .action-btn {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }

  .login-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 0 38px 31px;
    margin-bottom: 45px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }
}
</style>
